<template>
  <div class="message-list-container" v-loading="loading">
    <template v-if="list.length<=0">
      <empty :inline="false">{{emptyText}}</empty>
    </template>
    <template v-if="list.length>0">
      <div class="message-list-wp">
        <el-collapse v-model="activeNames" @change="handleActiveChange">
          <el-collapse-item v-for="(item,index) in list" :name="item.id" :key="item.id">
            <template slot="title">
              <span class="title-name">{{item.title}}</span>
              <span class="title-time">{{item.createTime | parseTime}}</span>
            </template>
            <div class="message-content">{{item.content}}</div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!--分页-->
      <div class="pagination-wrapper">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
  import Empty from '@/components/Empty';
  import {getMessageList, updateMessageList} from '@/api/message';

  export default {
    name: 'message-list',
    components: {
      'empty': Empty,
    },
    props:{
      emptyText:{
        type:String,
        default:'暂无信息',
      },
      isRead:{
        type:Boolean,
        default:false,
      }
    },
    data()
    {
      return {
        list:[
          /*{
            "content": "t6Pn6F5aDS",
            "createTime": 1509270521000,
            "id": 10120,
            "read": true,
            "title": "IzfmXL474x"
          },*/
        ], //消息列表
        total:0, //消息总数
        pageSize: 10, //每页几条
        currentPage: 1, //当前页码
        loading:false,
        activeNames:[],
        actives:new Set(),
      }
    },
    mounted()
    {
      this.getMessage();
    },
    destroyed() //组件销毁的时候把未读消息设置为已读
    {
      if(!this.isRead)
      {
        let arr = Array.from(this.actives);
        if(arr.length > 0)
        {
          let data = {
            ids:arr.join(','),
          };
          updateMessageList(data).then(resp=>{

          }).catch(err=>{

          });
        }
      }
    },
    methods: {
      getMessage()
      {
        this.loading = true;

        let data = {
           pageNum:this.currentPage,
           pageSize:this.pageSize,
           isRead:this.isRead,
         };

        getMessageList(data).then(resp=>{
          let data = resp.data || {};
          this.list = data.list || [];
          this.total = data.total || 0;

          setTimeout(()=>{
            this.loading = false;
          },300);
        }).catch(err=>{

          setTimeout(()=>{
            this.loading = false;
          },300);
        });

      },
      handleSizeChange(val) //分页pageSize变动
      {
        this.pageSize = val;
        this.getMessage();
      },
      handleCurrentChange(val) //currentPage变动
      {
        this.currentPage = val;
        this.getMessage();
      },
      handleActiveChange(activeNames) //展开关闭状态改变，设置已读
      {
        if(!this.isRead)
        {
          activeNames.forEach(item=>{
            this.actives.add(item);
          });

        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .message-list-container
  {
    .message-list-wp
    {
      .el-collapse
      {
        border: none;
      }


      .title-name
      {

      }

      .title-time
      {
        padding: 0 20px;
      }

      .message-content
      {
        padding: 10px 20px;
      }
    }
    .pagination-wrapper
    {
      display: block;
      text-align: center;
      margin: 50px 0 30px;
    }
  }
</style>